<template>
	<div class="OsignIn">
		<div class="top">
			<van-nav-bar title="用户登录" left-text="返回" left-arrow @click-left="onClickLeft" />
		</div>
		<div class="Ocontent">
			<van-form @submit="onSubmit" class="Oform">
				<span class="Ospan">*</span><van-field v-model="username" name="用户名" label="用户名:" placeholder="用户名" :rules="[{ required: true, message: '请填写用户名' }]" />
				<span class="Ospan1">*</span><van-field v-model="password" type="password" name="密码" label="密码:" placeholder="密码" :rules="[{ required: true, message: '请填写密码' }]" />
				<div style="margin: 16px;">
					<van-button round block type="info" native-type="submit">
						登录
					</van-button>
				</div>
			</van-form>
		</div>
	</div>
</template>

<script>
	export default {
		name: "signIn",
		data() {
			return {
				username: '',
				password: '',
			}
		},
		methods: {
			onClickLeft() {
				this.$router.go(-1)
			},
			onSubmit(values) {
				console.log('submit', values);
			}
		}
	}
</script>

<style lang="scss">
	.OsignIn {
		.top {
			.van-nav-bar__left {
				font-size: 16px;
			}

			.van-nav-bar__title {
				font-size: 18px;
				font-weight: 600;
			}
		}

		.Ocontent {

			width: 100%;
			height: 250px;
			background-color: #f0f0f0;
			text-align: center;

			.Oform {
				position: relative;
				top: 25px;
				padding: 0px 10px;
				.Ospan{
					position: absolute;
					top: 18px;
					left: 40px;
					z-index: 99;
					color: red;
				}
				.Ospan1{
					position: absolute;
					top: 62px;
					left: 40px;
					z-index: 99;
					color: red;
				}
				.van-button--info{
					background: #44bb00;
				}
			}
		}
	}
</style>
